<!-- 框架滑动 -->
<template>
  <div class="wrapper">
        <div class="centent">
                <slot></slot>
        </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    name:"scroll",
    data () {
        return {
            //把框架实例保存在data中
            bscroll:null
        }
    },
    methods: {
                scroll(offsetTop){
                        //scrollto方法时把页面回到某个位置 最后一个参数时时间
                        this.bscroll.scrollTo(0,offsetTop,1000)
                },
                scrollto(){
                        //scrollto方法时把页面回到某个位置 最后一个参数时时间
                        this.bscroll.scrollTo(0,0,1000)
                },
                finishPullUp(){
                    //这里：当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。以便后面可以加载
                        this.bscroll.finishPullUp()
                        this.refresh()//重新刷新一次
                 },
                 refresh(){
                        this.bscroll.refresh()
                 }
    },
    mounted () {
        this.bscroll =new BScroll(document.querySelector(".wrapper"),{
                probeType:3,
                click:true,
                pullUpLoad:true
                
         }) 
         //时刻监听页面的滚动值 position这个参数就是y轴滑动的值 会不停的调用这个方法
        this.bscroll.on("scroll", (position) => {
             this.$emit("showorhide",position)
        })
        //'better-scroll'框架有个pullingup的方法 在上拉加载后调用
        this.bscroll.on("pullingUp",()=>{
            //在匿名函数中的this不是指向vue实例
                this.$emit("addpage")
        })
    }
}

</script>
<style  scoped>
    .wrapper{
        position: fixed;
        top: 44px;
        left: 0;
        right: 0;
        bottom: 49px;
    }
</style>